<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DApp猜拳游戏</title>
  <style>
  *{margin:0; padding: 0; font-weight: 200;}
  .player,.computer{
      width: 50%;
      float: left;
      padding-top: 30px;
      text-align: center
  }
  .player,.computer dt{
      font-size: 28px;
  }
  .player img,.computer img{
      margin-top: 30px;
      width: 30%;
  }
  .player img{
      transform:rotateY(180deg);
  }
  .select{
      text-align: center;
      font-size: 18px;
      max-width: 800px;
      margin: 0 auto;
      padding-top: 2%;
  }
  .select dt{
      width: 100%;
      overflow: hidden;
      line-height: 50px;
  }
  .select button{
      width: 20%;
      border:none;
      color: #fff;
      border-radius: 8px;
      line-height: 45px;
      margin: 0 5%;
      outline: none;
      font-size: 18px;
      cursor: pointer;
  }
  #info{
      width: 100%;
      text-align: center;
      overflow: hidden;
      font-size: 25px;
      line-height: 50px;
      color: red;
      padding-top: 2%;
      opacity: 0;
  }
  </style>
</head>

<body>
    <div class="computer">
        <dl>
            <dt>对手</dt>
            <dd><img src="images/2.png" id="computer" alt=""></dd>
        </dl>
    </div>
    <div class="player">
        <dl>
            <dt>你</dt>
            <dd><img src="images/2.png" id="player" alt=""></dd>
        </dl>
    </div>
    <div id="info">平手</div>
    <div class="select">
        <dl>
            <dt>点击下列图标选择要出的选项：</dt>
            <dd>
                <button value="1"><img src='images/1.png' style="width:80px"></button>
                <button value="2"><img src='images/2.png' style="width:80px"></button>
                <button value="3"><img src='images/3.png' style="width:80px"></button>
            </dd>
        </dl>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="app.js"></script>
</html>
